<?php
	$thumbs = '';
	if ( isset( $_SESSION['crop_zoom'] ) ){
		$thumbs = './' . C('WEB_PUBLIC_PATH') . '/' . C('DIR_ATTCH_PATH') . '/' . $_SESSION["crop_zoom"]["foder"] . '/thumb_' . $_SESSION["crop_zoom"]["name"];
	}
	if ( !empty( $thumbs ) ){
		$thumbs_str = $thumbs;
		if ( file_exists( $thumbs ) ){
			$preview_str = $thumbs;
		}else{
			$preview_str = __ROOT__.'/'.C('WEB_PUBLIC_PATH').'/images/cropzoom.gif';
		}
	}
?><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="__JS__/jQuery/jQuery_UI/themes/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /> 
		<script type="text/javascript" src="__JS__/jQuery/core.js"></script>
		<include file="Public:js_artDialog" />
		<script type="text/javascript" src="__JS__/jQuery/jQuery_UI/ui/jquery-ui-1.8.16.custom.js"></script>
		<script type="text/javascript" src="__JS__/jQuery/plugin/jquery.cropzoom.js"></script>
		<script type="text/javascript">
			$(function() {
			
				var cropzoom = $('#cropzoom_container').cropzoom({
					width: 500,
					height: 360,
					bgColor: '#ccc',
					enableRotation: true,
					enableZoom: true,
					selector: {
						w:{$_SESSION['crop_zoom']['custom_width']},
						h:{$_SESSION['crop_zoom']['custom_height']},
						showPositionsOnDrag:true,
						showDimetionsOnDrag:false,
						centered: true,
						bgInfoLayer:'#fff',
						borderColor: 'blue',
						animated: false,
						//maxWidth:<?php echo $_SESSION['crop_zoom']['custom_width'] * 2; ?>,
						//maxHeight:<?php echo $_SESSION['crop_zoom']['custom_height'] * 2; ?>,
						maxWidth:{$_SESSION['crop_zoom']['custom_width']},
						maxHeight:{$_SESSION['crop_zoom']['custom_height']},
						borderColorHover: 'yellow'
					},
					image: {
						source: '{$_SESSION["crop_zoom"]["large_path"]}',
						width: {$_SESSION["crop_zoom"]["width"]},
						height: {$_SESSION["crop_zoom"]["height"]},
						minZoom: 10,
						maxZoom: 150
					}
				});
				$("#crop").click(function(){
					cropzoom.send('{:U("zoompost")}', 'POST', {}, function(imgRet) {
						var append = '?' + new Date().getTime() + 'a' + Math.random();
						$("#generated").attr("src", imgRet + append);
					});			   
				});
				$("#restore").click(function(){
					$("#generated").attr("src", "__PUBLIC__/images/cropzoom.gif");
					cropzoom.restore();					  
				});
				
				var c_thumb_data = '{$thumbs_str}';
				$('#complete').click(function(){
					if (c_thumb_data != ''){
						art.dialog.data('crop_zoom_thumb', c_thumb_data);// 存储数据
					}
					art.dialog.close();
				});
				
			});
		</script>
        <style type="text/css">
        	html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label
        								{ margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent }
			table						{ margin:10px; }
			body						{ height:100%; font:12px/18px Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", sans-serif; color:#51555C; }
			img							{ border:none; }
        	.SiteAllButton				{ float:left; padding:5px 15px; border:1px solid #888; border-top-color:#ccc; border-left-color:#ccc; cursor:pointer; margin-top:10px; margin-right:10px; }
			#cropzoom_container			{ float:left; width:500px; }
			#preview					{ float:left; width:<?php echo $_SESSION['crop_zoom']['custom_width']; ?>px; height:<?php echo $_SESSION['crop_zoom']['custom_height']; ?>px; border:1px solid #999; padding:4px; background:#f7f7f7; }
			.page_btn					{ float:left; text-align:center; }
        </style>
	</head>
	<body>
		<table border="0" cellspacing="0" cellpadding="10">
		  	<tr>
		    	<td rowspan="2" valign="top"><div id="cropzoom_container"></div></td>
		    	<td colspan="2" valign="top"><div id="preview"><img id="generated" src="{$preview_str}"  /></div></td>
		  	</tr>
		  	<tr>
		    	<td colspan="2" valign="top">
		    		<div class="page_btn">
				      	<input type="button" class="SiteAllButton" id="crop" value="剪切照片" />
				      	<input type="button" class="SiteAllButton" id="restore" value="照片复位" />
				      	<input type="button" class="SiteAllButton" id="overAgain" onclick="window.location.href='{:U("overagain")}';" value="重新上传" />
				      	<input type="button" class="SiteAllButton" id="complete" value="完成裁切" />
				   	</div>
		    	</td>
		  	</tr>
		</table>
	</body>
</html>